<template>
  <Dialog v-model="dialogVisible" width="80%" top="2vh" :title="dialogTitle">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="105px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" aria-placeholder="请输入角色名称" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio
                v-for="item in getIntDictOptions(DICT_TYPE.COMMON_SEX)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="mobile" label="电话">
            <el-input v-model="formData.mobile" placeholder="请输入电话" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="identityCard" label="身份证号">
            <el-input v-model="formData.identityCard" placeholder="请输入身份证号"
          /></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item prop="birthday" label="出生日期">
            <el-date-picker
              value-format="YYYY-MM-DD"
              v-model="formData.birthday"
              type="date"
              placeholder="请选择出生日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="birthdayType" label="生日类型">
            <el-select v-model="formData.birthdayType" placeholder="请选择生日类型">
              <el-option
                v-for="item in getIntDictOptions(DICT_TYPE.CALENDAR_TYPE)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="maritalStatus" label="婚姻状况">
            <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况">
              <el-option
                v-for="item in getIntDictOptions(DICT_TYPE.MARITAL_STATUS)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="politicalOutlook" label="政治面貌">
            <el-input v-model="formData.politicalOutlook" placeholder="请输入政治面貌" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item prop="address" label="家庭住址">
            <el-input v-model="formData.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="domicileAddress" label="户籍地址">
            <el-input v-model="formData.domicileAddress" placeholder="请输入户籍地址" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item prop="type" label="老人类别">
          <el-radio-group v-model="formData.type">
            <el-radio
              v-for="item in getIntDictOptions(DICT_TYPE.ELDER_TYPE)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="liveType" label="居住情况">
          <el-radio-group v-model="formData.liveType">
            <el-radio
              v-for="item in getIntDictOptions(DICT_TYPE.ELDER_LIVE_TYPE)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row />
      <el-row>
        <el-col :span="6">
          <el-form-item prop="careCard" label="助老卡号">
            <el-input v-model="formData.careCard" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="socialSecurityNumber" label="社保卡号">
            <el-input v-model="formData.socialSecurityNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="financial" label="经济来源">
            <el-input v-model="formData.financial" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="monthlyIncome" label="月收入">
            <el-input v-model="formData.monthlyIncome" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row />
      <el-row>
        <el-col :span="6">
          <el-form-item prop="bloodType" label="血型">
            <el-input v-model="formData.bloodType" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="degreeEducation" label="文化程度">
            <el-input v-model="formData.degreeEducation" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="professional" label="专业">
            <el-input v-model="formData.professional" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="professionalTitle" label="职称">
            <el-input v-model="formData.professionalTitle" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item prop="srcUnit" label="原单位">
            <el-input v-model="formData.srcUnit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="personality" label="性格心理">
            <el-input v-model="formData.personality" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="dietaryCharacteristics" label="饮食特点">
            <el-input rows="2" type="textarea" v-model="formData.dietaryCharacteristics" />
          </el-form-item>
          <el-form-item prop="hobby" label="爱好">
            <el-input type="textarea" v-model="formData.hobby" />
          </el-form-item>
          <el-form-item prop="speciality" label="特长">
            <el-input rows="2" type="textarea" v-model="formData.speciality" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="照片">
            <UploadImg v-model="formData.imgUrl" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="ElderInfoEdit" setup>
const message = useMessage() // 消息弹窗
import * as EldInfoApi from '@/api/elder/elderInfo'
import * as ElderInfoModel from '@/model/elder/info/ElderInfo'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as ElderApi from '@/api/elder/elderInfo'
import * as Enum from '@/utils/constants'
const { t } = useI18n()
const dialogTitle = ref('')
const dialogVisible = ref(false)
const fromType = ref('')
const formRef = ref()
const formLoading = ref(false) //表单的加载中，1）修改时的数据加载，2）提交的按钮禁用
const formData = ref({
  id: '',
  name: '',
  identityCard: '',
  sex: Enum.CommonSexEnum.MALE,
  mobile: '',
  maritalStatus: Enum.MaritalStatusEnum.MARRIED,
  birthday: '',
  birthdayType: Enum.CalendarTypeEnum.SOLAR_CALENDAR,
  type: Enum.ElderTypeEnum.SELF_CARE,
  liveType: Enum.ElderLiveTypeEnum.ALONE,
  address: '',
  domicileAddress: '',
  politicalOutlook: '',
  careCard: '',
  financial: '',
  monthlyIncome: '',
  healthCare: '',
  socialSecurityNumber: '',
  bloodType: '',
  degreeEducation: '',
  professional: '',
  professionalTitle: '',
  srcUnit: '',
  personality: '',
  dietaryCharacteristics: '',
  speciality: '',
  hobby: '',
  picture: '',
  contractSignDate: '',
  contractExpireDate: '',
  checkinDate: '',
  imgUrl: ''
})

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  fromType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ElderApi.get(id)
    } finally {
      formLoading.value = false
    }
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const formRules = reactive({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
})
// 提交表单
const emit = defineEmits(['success'])
const submitForm = async () => {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  formLoading.value = true
  try {
    const data = formData.value as unknown as ElderInfoModel.ElderInfo
    if (fromType.value === 'create') {
      await EldInfoApi.insert(data)
      message.success(t('common.createSuccess'))
    } else {
      await EldInfoApi.update(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件

    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: '',
    name: '',
    identityCard: '',
    sex: Enum.CommonSexEnum.MALE,
    mobile: '',
    maritalStatus: Enum.MaritalStatusEnum.MARRIED,
    birthday: '',
    birthdayType: Enum.CalendarTypeEnum.SOLAR_CALENDAR,
    type: Enum.ElderTypeEnum.SELF_CARE,
    liveType: Enum.ElderLiveTypeEnum.ALONE,
    address: '',
    domicileAddress: '',
    politicalOutlook: '',
    careCard: '',
    financial: '',
    monthlyIncome: '',
    healthCare: '',
    socialSecurityNumber: '',
    bloodType: '',
    degreeEducation: '',
    professional: '',
    professionalTitle: '',
    srcUnit: '',
    personality: '',
    dietaryCharacteristics: '',
    speciality: '',
    hobby: '',
    picture: '',
    contractSignDate: '',
    contractExpireDate: '',
    checkinDate: '',
    imgUrl: ''
  }
  formRef.value?.resetFields()
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
